<template>
  <div class="modal-overlay" @click="$emit('close')">
    <div class="modal" @click.stop>
      <div class="modal-content">
        <div class="modal-body">
          <slot name="body"></slot>
          <div style="display: flex; justify-content: center;">
            <div 
              @click="$emit('close')" 
              style="width: 342px; height: 40px; background: #F2F3F5; border-radius: 52px; margin-top: 21px; text-align: center; line-height: 40px; font-size: 16px;">
              关闭
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 将模态框置于底部 */
  z-index: 999; /* 确保遮罩层在其他内容上方 */
}

.modal {
  width: 100%; /* 可以根据需求设置宽度 */
  max-height: 560px;
}

.modal-content {
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  border-radius: 12px 12px 0px 0px;
}

.modal-body {
  padding: 20px 12px;
  font-size: 14px;
  line-height: 24px;
  max-height: 400px; /* 设置最大高度，可以根据需要调整 */
  overflow-y: auto; /* 启用垂直滚动 */
}
</style>